<template>
    <div>
        <Form
                ref="form"
                :form-items="formItems"
        ></Form>
    <MpMaterialNewsPreviewEdit
            :show-add-button="true"
            :form-operations="formOperations"
            ref="newsPreviewEdit"
            thumb-media-id-place-holder="注意：临时素材的媒体id"
            :thumb-media-id-upload-url="thumbMediaIdUploadUrl"
            thumb-media-id-tips="图片（image）: 10M，支持PNG\JPEG\JPG\GIF格式 "
            v-on:currentItemChange="currentItemChange">
        <el-button icon="el-icon-refresh" type="primary" class="g-width100 g-margin-top30" :loading="uploadToWxServerLoading"  @click="uploadToWxServer">上传到微信服务器</el-button>
    </MpMaterialNewsPreviewEdit>
        <MassDoSend :send-ignore-reprint="true" :form-data="formData"></MassDoSend>
    </div>
</template>

<script>
    import MpMaterialNewsPreviewEdit from '../../../components/mp/MpMaterialNewsPreviewEdit.vue'
    import MassDoSend from './MassDoSend.vue'
    import Form from '../../../../../common-util/src/components/page/Form.vue'
    export default {
        components:{
            MpMaterialNewsPreviewEdit,
            Form,
            MassDoSend
        },
        props:{

        },

        computed:{

        },
        data(){
            return {
                uploadToWxServerLoading: false,
                selectedItem:{
                    index: null,
                    item: null
                },
                // 上传后保存的上传响应结果
                uploadResult: null,
                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            select:{
                                url: this.$baseURL.wx + '/wx/mp/config/list',
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            required: true,
                            label: '公众号',
                        }
                    },
                    {
                        field:{
                            name: 'msgType',
                            value: 'mpnews'
                        }
                    }
                ],
                formOperations:[
                    {
                        element:{
                            type: 'button',
                            button:[
                                {
                                    action: this.saveCurrentNews,
                                    disabled: ()=>{return this.selectedItem.index ==null},
                                    label: '保存当前图文项'
                                },
                                {
                                    action: this.deleteCurrentNews,
                                    disabled: ()=>{return this.selectedItem.index ==null},
                                    label: '删除当前图文项'
                                },
                                {
                                    action: 'reset',
                                    label: '重置',
                                    type: 'default'
                                }
                            ]
                        }
                    }
                ]
            }
        },
        mounted() {

        },
        methods:{
            thumbMediaIdUploadUrl(){
                let type = 'image'
                let appCode = this.$refs.form.getFormData().appCode
                if (!appCode) {
                    return false
                }

                return this.$baseURL.wx + '/wx/mp/material/'+ appCode +'/create/media/' + type
            },
            formData(){
                let r = false
                this.$refs.form.validateAndSubmitForm(()=>{
                    r = true
                })
                if(r == false){
                    this.$message.error('请选择公众号')
                    return false
                }
                if(!this.uploadResult){
                    this.$message.error('请选上传到微信服务器以获取素材id')
                    return false
                }
                let form = this.$refs.form.getFormData()

                form.mediaId = this.uploadResult.mediaId
                return form
            },
            currentItemChange(val){
                this.selectedItem = val
            },
            getNewsItem(){
                return this.$refs.newsPreviewEdit.getNewsItem()
            },
            saveCurrentNews() {
                this.$refs.newsPreviewEdit.saveCurrentNews()
            },
            deleteCurrentNews(){
                this.$refs.newsPreviewEdit.deleteCurrentNews()
            },
            // 上传到微信服务器
            uploadToWxServer(){
                if(!this.getNewsItem() || this.getNewsItem().length == 0){
                    this.$message.error('请先添加图文项并进行编辑')
                    return
                }
                let appCode = this.$refs.form.getFormData().appCode
                if(!this.$refs.form.getFormData().appCode){
                    this.$message.error('请选择公众号')
                    return
                }

                let param = {
                    articles: this.getNewsItem()
                }
                this.uploadToWxServerLoading = true
                this.axios.post(this.$baseURL.wx + '/wx/mp/mass/' + appCode + '/uploadnews',param)
                    .then(res=>{

                        this.uploadResult = res.data
                        this.$message.success('上传成功，现在可以群发消息了')
                    }).catch(error=>{
                    if(error.response){
                        if(error.response.status != 401){
                            this.$message.error(error.response.data.msg + ' 请确认所有图文项都已保存')
                        }else{
                            this.$message.error(error.response.data.msg)
                        }
                    }else {
                        this.$message.error('网络错误或服务不可用')
                    }
                }).finally(()=>{
                    this.uploadToWxServerLoading = false
                })
            },
        },
        watch:{
        }
    }
</script>

<style scoped>

</style>